{% extends "index.html" %}

{% block indexBody %}
    <h3>服务名: <span style="color: red">{{ name }}</span></h3>
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
        新建
    </button>
    <table class="table table-striped">
        <thead>
        <tr>
            <th scope="col">ID</th>
            <th scope="col">发布日期</th>
            <th scope="col">版本号</th>
            <th scope="col">运行状态</th>
            <th scope="col">#</th>
        </tr>
        </thead>
        <tbody id="app">
        </tbody>
    </table>


    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">{{ name }}</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3 row">
                        <label for="versionNumber" class="col-sm-4 col-form-label">版本号</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="versionNumber">
                        </div>
                    </div>
                    <div class="mb-3 row">
                        <label for="versionDesc" class="col-sm-4 col-form-label">版本描述</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="versionDesc">
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" onclick="updateVersion()">保存</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block jsBlock %}
    <script>
        window.onload = function () {
            const pathArray = window.location.pathname.split("/")
            fetch(`/api/versions/${pathArray[3]}`, {
                headers: {"Authorization": `Bearer ${sessionStorage.getItem("token")}`}
            }).then(response => response.json()).then(data => {
                if (data.code === 1) {
                    let table = document.querySelector("#app")
                    data.result.forEach((e) => {
                        table.appendChild(renderTr(e))
                    })
                } else {
                    alert(data.result)
                }
            }).catch(error => {
                alert(error)
            })
        }

        function renderTr(item) {
            let resultDom = document.createElement("tr")

            let idTd = document.createElement("td")
            idTd.innerText = item["id"]
            resultDom.appendChild(idTd)

            let tdCreated = document.createElement("td")
            tdCreated.innerText = item["created_at"]
            resultDom.appendChild(tdCreated)

            const fields = ["version", "description"]
            fields.forEach((e) => {
                let td = document.createElement("td")
                td.appendChild(renderInput(item["id"], e, item[e], "/api/change-version"))
                resultDom.appendChild(td)
            })

            let runningStatus = document.createElement("td")
            if (item["running"]) {
                runningStatus.textContent = "运行中"
                runningStatus.style.color = "#00cc00"
            } else {
                runningStatus.textContent = "未运行"
                runningStatus.style.color = "black"
            }
            resultDom.appendChild(runningStatus)

            resultDom.appendChild(renderButtonGroup(item))

            return resultDom
        }

        function renderButtonGroup(item) {
            let div = document.createElement("div")
            div.classList.add("btn-group")
            div.setAttribute("role", "group")

            let runButton = document.createElement("button")
            runButton.type = "button"
            runButton.classList.add("btn", "btn-success")
            runButton.innerText = "运行"
            runButton.addEventListener("click", function () {
                runService(item)
            })
            div.appendChild(runButton)

            let backButton = document.createElement("button")
            backButton.type = "button"
            backButton.classList.add("btn", "btn-danger")
            backButton.innerText = "删除"
            backButton.addEventListener("click", function () {
                deleteVersion(item["id"])
            })
            div.appendChild(backButton)

            return div
        }

        function runService(item) {
            if (item["running"]) {
                alert("已经在运行了")
            } else {
                const loading = new Loading({type: 3})
                loading.init()
                fetch(`/api/run/${item["id"]}`, {
                    headers: {"Authorization": `Bearer ${sessionStorage.getItem("token")}`}
                }).then(response => response.json()).then(data => {
                    loading.hide()
                    if (data.code !== 1) {
                        alert(data.result)
                    } else {
                        window.location.reload()
                    }
                })
            }
        }

        function deleteVersion(id) {
            const loading = new Loading({type: 3})
            loading.init()
            fetch(`/api/delete-version/${id}`, {
                headers: {"Authorization": `Bearer ${sessionStorage.getItem("token")}`}
            }).then(response => response.json()).then(data => {
                loading.hide()
                if (data.code !== 1) {
                    alert(data.result)
                } else {
                    window.location.reload()
                }
            })
        }

        function updateVersion() {
            const loading = new Loading({
                type: 3,
                wrap: document.querySelector("#exampleModal")
            })
            loading.init()
            fetch("/api/new-version", {
                method: "POST",
                headers: {"Authorization": `Bearer ${sessionStorage.getItem("token")}`},
                body: JSON.stringify({
                    name: window.location.pathname.split("/")[3],
                    version: document.querySelector("#versionNumber").value,
                    description: document.querySelector("#versionDesc").value
                })
            }).then(response => response.json()).then(data => {
                loading.hide()
                alert(data.result)
                window.location.reload()
            })
        }

    </script>
{% endblock %}